import React, { useEffect, useState } from 'react';
import { t } from '@lingui/macro';
import { Progress } from '@alifd/next';
import { useStore } from '@/hooks';
import { observer } from 'mobx-react-lite';
import { toJS } from 'mobx';

const Statistics = () => {
  const { dashboardStore: store } = useStore();
  const { pipeData } = store;

  useEffect(() => {
    (async () => {
      await store.get();
    })();
  }, []);

  /**
   * @description 格式化文字,环形表中间的文字
   * @param {*} value 数值
   * @param {*} text 文字
   * @returns object
   */
  const format = (value, text) => {
    return (
      <div>
        <div>{value.today}/{value.month}</div>
        <div style={{ fontSize: 16, marginTop: 5 }}>{t`${text}`}</div>
      </div>
    );
  };

  return (
    <div style={{ width: '100%', display: 'flex', justifyContent: 'space-around', padding: '10px 0' }}>
      {[].concat(global.isAdmin ? [
        { type: 'todayCcOrder', monthType: 'monthCcOrder', label: '包车订单' },
        { type: 'todayBusOrder', monthType: 'monthBusOrder', label: '巴士订单' },
        { type: 'todayScOrder', monthType: 'monthScOrder', label: '专线订单' },
        { type: 'todayCustomer', monthType: 'monthCustomer', label: '新增客户' },
        { type: 'todayPartner', monthType: 'monthPartner', label: '新增合伙人' },
      ] : [
        { type: 'todayCcOrder', monthType: 'monthCcOrder', label: '包车订单' },
      ]).map((item, index) => (
        <Progress
          key={`${index}`}
          shape="circle"
          percent={toJS(pipeData)?.[item.type] ? ((toJS(pipeData)[item.type] / toJS(pipeData)[item.monthType]) * 100) : 0}
          textRender={() => format({ today: toJS(pipeData)[item.type], month: toJS(pipeData)[item.monthType] }, item.label)}
        />
      ))}
    </div>

  );
};

export default observer(Statistics);
